import { Link } from '@brillout/docpress'
import { JustAMiddleware, UiFrameworkExtension } from '../../components'

Vike provides an frontend architecture that is both flexible and robust.


## Do-one-thing-do-it-well

Vike's architecture is designed with meticulous care and follows what we call a "do-one-thing-do-it-well architecture": Vike focuses on being an excellent frontend framework while not interfering with the rest of your stack.

With Vike, you can choose:
 - Any UI framework (React/Vue/Solid/...)
 - Any server (Express.js, Deno, HatTip, ...)
 - Any deployment (AWS, Cloudflare Workers, Vercel, ...)

With Vike, your application's architecture is composed of loosely coupled core constituents with a clear separation of concerns.

We believe it's paramount for the web that these core constituents are developed mostly independent of each other. Providing freedom for the user, and fostering a vibrant ecosystem with an innovation-driven competition delivering high-quality tools for the users.


## `onRenderHtml()` & `onRenderClient()`

The <UiFrameworkExtension /> integrate UI frameworks. But, if you want, instead of using <UiFrameworkExtension name noLink /> you can use the hooks `onRenderHtml()` and `onRenderClient()` for complete control over how pages are rendered.

Not only can you manually integrate with any UI framework you want and however you want, you can also deeply integrate with your favorite data fetching tools. For example, you can integrate with Relay in ways that aren't possible with other frameworks.

```js
// /renderer/+onRenderHtml.js
// Environment: server

export { onRenderHtml }

import { renderToHtml } from 'some-ui-framework'
import { escapeInject, dangerouslySkipEscape } from 'vike/server'

async function onRenderHtml(pageContext) {
  const { Page } = pageContext
  const pageHtml = await renderToHtml(Page)
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>My Vike app</title>
      </head>
      <body>
        <div id="root">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}
```

```js
// /renderer/+onRenderClient.js
// Environment: browser

export { onRenderClient }

import { renderToDom } from 'some-ui-framework'

async function onRenderClient(pageContext) {
  const { Page } = pageContext
  await renderToDom(Page, document.getElementById('#root'))
}
```


## `renderPage()`

<JustAMiddleware />

Vike can easily be embedded into any server architecture and any deployment strategy.
